<template>
  <div class="wh-graph-container">
    <div class="wh-graph" id='container' ref='container'></div>
  </div>
</template>

<script>
import { Graph } from '@antv/x6';
import { register } from '@antv/x6-vue-shape'
export default {
  name: 'whGraphEditor',
  data () {
    return {
      graph: null
    }
  },
  mounted() {
    this.graph = new Graph({
      container: document.getElementById('container'),
      panning: true, //是否支持拖拽平移
      resizing: true,
      interacting: function (cellView) {
        // 'nodeMovable' 节点是否可以被移动。
        // if (
        //   cellView.cell.getData() != undefined &&
        //   !cellView.cell.getData().disableMove
        // ) {
        //   return { nodeMovable: false }
        // }
        return true
      }
    })
    // 通过当前浏览器缩放计算流程图的缩放值
    if (window.devicePixelRatio <= 1) {
      this.graph.scale(1)
    } else {
      this.graph.scale(document.documentElement.clientWidth / window.screen.width)
    }
    const data = {
      // 节点
      nodes: [
        {
          id: 'node1', // String，可选，节点的唯一标识
          x: 40,       // Number，必选，节点位置的 x 值
          y: 40,       // Number，必选，节点位置的 y 值
          width: 80,   // Number，可选，节点大小的 width 值
          height: 40,  // Number，可选，节点大小的 height 值
          label: 'hello', // String，节点标签
        },
        {
          id: 'node2', // String，节点的唯一标识
          x: 160,      // Number，必选，节点位置的 x 值
          y: 180,      // Number，必选，节点位置的 y 值
          width: 80,   // Number，可选，节点大小的 width 值
          height: 40,  // Number，可选，节点大小的 height 值
          label: 'world', // String，节点标签
        },
      ],
      // 边
      // edges: [
      //   {
      //     source: 'node1', // String，必须，起始节点 id
      //     target: 'node2', // String，必须，目标节点 id
      //   },
      // ],
    };
    this.graph.fromJSON(data)
  },
  methods: {

  }
}
</script>

<style scoped lang="scss">
  .wh-graph-container {
    width: 100%;
    height: 100%;
    .wh-graph {
      width: 100%;
      height: 100%;
    }
  }
</style>
